<!--
 * @Descripttion: 登录
 * @Author: zzt
 * @Date: 2021-09-15 10:37:28
 * @LastEditors: zzt
 * @LastEditTime: 2021-09-28 14:59:02
-->
<template>
    <div class="login-container">
        <img class="container-logo" src="../../static/images/logo.png" />
        <img src="../../static/images/loginCn.png"  class="container-left"/>
        <div class="container-right">
            <div class="title-wrap flex ali-c jus-a">
                <div 
                    v-for="(item,index) in titList"
                    :key="index"
                    class="title"
                    :class="{active:selectIndex==index}"
                    @click="tabClick(index)"
                
                >{{item}}</div>
                 
            </div>
            <el-input
                class="mt50"
                placeholder="请输入手机号"
                v-model.trim="phone"
                size="large"
            >
            </el-input>
            <!-- 密码登录 -->
            <el-input
                v-show="selectIndex==0"
                class="mt30"
                placeholder="密码"
                v-model.trim="password"
                size="large"
                type="password"
            >
            </el-input>
            <!-- 短信登录  -->
            <el-input
                v-show="selectIndex==1"
                class="mt30"
                placeholder="验证码"
                v-model.trim="code"
                clearable
                size="large"
                @keyup.enter.native="handleLogin"
            >
                <el-button
                    slot="append"
                    @click="onSendCode"
                    :disabled="!isShow"
                >
                    <span class="fs16" v-show="isShow">获取验证码</span>
                    <span class="fs16" v-show="!isShow"
                        >{{ count }} s</span
                    >
                </el-button>
            </el-input>
            <el-button
                type="primary"
                class="loginBtn"
                @click="handleLogin"
                :loading="loginLoading"
            >
               登录
            </el-button> 
            <el-checkbox v-model="isChecked" class="mt10" size="small">我已阅读并同意《用户协议》、《隐私政策》</el-checkbox>               
        </div>
       
    </div>
    
    
</template>

<script>
export default {
    name: "login",
    components:{
        
    },
    computed: {
        token: {
            get() {
                return this.$store.getters.language;
            },
            set(val) {},
        },
        
    },
    data() {
        return {
            titList:['账号登录','短信登录'],
            selectIndex:0,
            phone: "",
            password:"",
            code: "",
            loginType:"",//登录类型1：账号+密码 2账号+验证码
            isChecked:false,
            isShow: true,
            count: 0,
            timer: null,
            loginLoading: false,
          

            
        };

    },
    methods: {
        setToken(token){
            this.$store.dispatch("setToken", token);
        },
        tabClick(index){
            this.selectIndex = index;
            this.loginLoading = false;
        },
        handleLogin() {
            if(this.phone==null||this.phone==""){
                this.toast.warning("请输入手机号");
                return false;
            };
            if(this.selectIndex==0){
                if(this.password==null||this.password==""){
                    this.toast.warning("请输入密码");
                    return false;
                };
            }else{
                if(this.code==null||this.code==""){
                    this.toast.warning("请输入验证码");
                    return false;
                };
            }
            if(this.isChecked==false){
                this.toast.warning("请勾选用户协议");
                return false; 
            }
            this.sendLogin();
        },
        onSendCode() {
            if(this.phone ==null||this.phone==""){
                this.toast.warning("请输入手机号");
                return false;
            };
            //验证码倒计时
            if (!this.timer) {
                let data = { tel: this.phone };
                let that = this;
                this.request.sendSms(data, function (res) {
                    if (res.code == "200") {
                        that.toast.success(res.message);
                        that.count = 60;
                        that.isShow = false;
                        that.timer = setInterval(() => {
                            if (that.count > 0 && that.count <= 60) {
                                that.count--;
                            } else {
                                that.isShow = true;
                                clearInterval(that.timer);
                                that.timer = null;
                            }
                        }, 1000);
                    } else {
                        that.toast.error(res.message);
                    }
                });
            }
        },
        sendLogin(){
            let that = this;
            this.loginLoading = true;
            let data = {
                username:this.phone,
                password:this.selectIndex==0?this.password:'',
                smsCode: this.selectIndex==0?'':this.code,
                type: String(Number(this.selectIndex)+1) 
            };
            this.request.login(data, function (res) {
                that.loginLoading = false;
                if (res.code == "200") {
                    let resData = res.data;
                    setTimeout(() => {
                        that.setToken(resData.token)
                        that.$router.push('/index');
                        that.toast.success(res.message);
                    }, 300);
                } else {
                    that.loginLoading = false;
                    that.toast.error(res.message);
                }
            });
        },
    },
    created() {
        this.stringutils.clearData();
        
    },
    watch: {
        

    },

};
</script>

<style lang="stylus" scoped>
    .login-container 
        position fixed
        text-align center
        width 100%
        height 100%
        background url('../../static/images/loginBg.png') no-repeat center
        background-size cover
        overflow hidden
        .container-logo 
            width 200px
            height auto
            position fixed
            left 80px
            top 50px
            z-index 999
        .container-left
            width 800px
            position: fixed;
            left: 80px;
            top: 180px;
            z-index: 999;
            opacity: .9;
            
        .container-right 
            position fixed
            top 200px
            right 250px
            z-index 999
            background #fff
            width 450px
            min-height 480px
            padding 45px
            box-shadow 0px 28px 36px 11px rgba(25, 104, 190, 0.08)
            border-radius 10px
            .title-wrap
                padding 0 40px
                .title
                    font-size 22px
                    color #bbb
                    line-height 40px
                    cursor pointer
                    border-bottom 3px solid transparent 
                    &.active
                       color #2082ed
                       border-color #2082ed 
            .loginBtn
                width 100%
                height 50px
                font-size 16px
                margin-top 80px

    
</style>